<template>
  <div id="ActivityTable">
    <el-table
      border style="width: 100%"
      empty-text="暂无活动数据"
      :data="activityData"
    >
      <el-table-column
        label="图片"
      >
        <template slot-scope="scope">
          <img
            class="activity_pic"
            :src="`${scope.row.pic}?imageView2/1/w/284/h/146`"
            width="284px" height="146px" alt=""
            @click="showBigPic(scope.row.pic)"
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        label="活动名称"
      >
      </el-table-column>
      <el-table-column
        prop="itemId"
        label="活动ID"
      >
      </el-table-column>
      <el-table-column
        prop="linktext"
        label="关联商品/券"
      >
      </el-table-column>
      <el-table-column
        prop="createDate"
        label="建档时间"
      >
      </el-table-column>
      <el-table-column
        label="操作"
      >
        <template slot-scope="scope">
          <!--<el-button-->
            <!--type="text" size="small"-->
            <!--@click="$emit('editBtnClick')"-->
          <!--&gt;编辑</el-button>-->
          <el-button
            type="text" size="small" style="color: #dd6161"
            @click="deleteBtnClick(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      layout="prev, pager, next"
      :page-count="pageInfo.pageCount"
      :page-size="pageInfo.pageSize"
      :current-page="pageInfo.currentPage"
      @current-change="changeCurrentPage"
    >
    </el-pagination>

    <!-- 查看大图 -->
    <el-dialog
      :visible.sync="bigPicDialogVis"
    >
      <img width="100%" :src="currentPic" alt="">
    </el-dialog>

    <!-- dialog 删除活动 -->
    <el-dialog
      title="提示"
      :visible.sync="deleteAcVis"
      width="30%"
    >
      <span>确认删除？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteAcVis = false">取 消</el-button>
        <el-button type="primary" @click="deleteAcOk" :loading="deleteLoading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import API from '@/config/api.js'
import ErrorConfig from '@/config/error.config.js'
export default {
  name: 'ActivityTable',
  props: ['activityData', 'pageInfo'],
  data () {
    return {
      bigPicDialogVis: false,
      currentPic: '',
      deleteAcVis: false,
      beHandlingRow: null,
      deleteLoading: false
    }
  },
  components: {
  },
  methods: {
    showBigPic (picUrl) {
      this.currentPic = picUrl
      window.setTimeout(() => { this.bigPicDialogVis = true }, 200)
    },
    deleteBtnClick (row) { // 删除按钮点击
      this.beHandlingRow = row
      this.deleteAcVis = true
    },
    async deleteAcOk () { // 确认删除
      this.deleteLoading = true
      const { id } = this.beHandlingRow
      const response = await API.deleteActivity({ id })
      this.deleteLoading = false
      this.deleteAcVis = false
      const { code } = response
      if (code === 1) {
        this.$emit('reloadPage')
      } else {
        if (code === -1) {
          const { msg } = response
          this.$message.error(msg)
        } else {
          this.$message.error(ErrorConfig[code])
        }
      }
    },
    changeCurrentPage (e) {
      this.$emit('currentChange', e)
    }
  }
}
</script>

<style scoped lang="scss">
  #ActivityTable {
    box-sizing: border-box;
    padding: 20px 20px 10px;
    background: #fff;
    .el-pagination {
      margin-top: 20px;
      text-align: center;
    }
  }
  .activity_pic {
    cursor: pointer;
  }
</style>
